<template>
  <view class="container">
    <view class="common_cell">
      <u-cell-group :border="false">
        <u-cell :border="false" title="全天">
          <u-switch slot="right-icon" v-model="checked"></u-switch>
        </u-cell>
      </u-cell-group>
    </view>

    <view class="common_cell">
      <u-cell-group :border="false" class="common_cell">
        <u-cell
          title="启动"
          :value="startTime"
          @click="this.$refs['startTimePicker'].show = true"
        />
        <u-cell
          @click="this.$refs['stopTimePicker'].show = true"
          :border="false"
          title="停止"
          :value="stopTime"
        />
      </u-cell-group>
    </view>

    <view class="common_cell">
      <u-cell-group :border="false" class="common_cell">
        <u-radio-group v-model="value" placement="column" @change="radioChange">
          <u-cell :border="false" title="执行一次">
            <u-radio slot="right-icon" name="isOnlyOnce" />
          </u-cell>
          <u-cell :border="false" title="每天">
            <u-radio slot="right-icon" name="isEveryDay" />
          </u-cell>
          <u-cell :border="false" title="工作日">
            <u-radio slot="right-icon" name="isWorkDay" />
          </u-cell>
          <u-cell :border="false" title="周末">
            <u-radio slot="right-icon" name="isWeekend" />
          </u-cell>
          <u-cell :border="false" title="自定义" :value="weeksLabel">
            <u-radio slot="right-icon" name="isCustom" />
          </u-cell>
        </u-radio-group>
      </u-cell-group>
    </view>

    <commonDateTimePicker
      ref="startTimePicker"
      @confirm="startTimePickerConfirm"
      mode="time"
    />

    <!-- 结束时间弹窗 -->
    <commonDateTimePicker
      ref="stopTimePicker"
      @confirm="stopTimePickerConfirm"
      mode="time"
    />

    <!-- 保存设置 -->
    <view class="common_save_button">保存设置 </view>
  </view>
</template>

<script>
import commonDateTimePicker from "@/components/common-datetime-picker/index.vue";
export default {
  components: {
    commonDateTimePicker,
  },
  data() {
    return {
      // 页面参数
      options: {},
      // 是否全天
      checked: false,
      value: "",
      // 如果选择的是自定义，指定礼拜几
      // 礼拜
      weeks: [],

      // 启动时间
      startTime: "",
      stopTime: "",
    };
  },
  // 计算属性
  computed: {
    weeksLabel() {
      let list = [];
      this.weeks.forEach((e) => {
        // e是1的就是周一
        switch (e) {
          case "1":
            list.push("周一");
            break;
          case "2":
            list.push("周二");
            break;
          case "3":
            list.push("周三");
            break;
          case "4":
            list.push("周四");
            break;
          case "5":
            list.push("周五");
            break;
          case "6":
            list.push("周六");
            break;
          case "7":
            list.push("周日");
        }
      });

      return list?.join(",");
    },
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {},

  // 通过EventChannel监听下一个页面的数据
  mounted() {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},

  methods: {
    radioChange(_e) {
      console.log("_e", _e);
      // 如果是自定义
      if (_e === "isCustom") {
        this.toCustom();
      } else {
        // this.weeks 清空, 需要保持vue2的响应式
        this.weeks = [];
      }
    },
    toCustom() {
      const app = this;
      uni.navigateTo({
        url: "/pages/common/selectDay/index",
        events: {
          // 跳到选择周几页
          onSelectDayChange: function (data) {
            // this.weeks = data;
            data.forEach((item) => {
              app.weeks.push(item);
            });
          },
        },
        success: function (res) {
          this.weeks = [];
        },
      });
    },
    startTimePickerConfirm(_val) {
      this.startTime = _val;
    },
    stopTimePickerConfirm(_val) {
      this.stopTime = _val;
    },
  },
};
</script>

<style lang="scss" scoped>
uni-page-body {
  height: 100%;
}

page {
  height: 100%;
}
.container {
  background: #f6f7fb;
  height: 100%;

  padding: 0 25.568rpx 25.568rpx 25.568rpx;

  ::v-deep .u-cell__body {
    padding-left: 0px;
    padding-right: 0px;
  }
}
</style>
